<template>
	<view class="add">
		<view class="add-l" @click="startCity">
			北京
		</view>
		<view class="add-c">
			<uni-icons type="loop" color="#bbb" size="30"></uni-icons>
		</view>
		<view class="add-r" @click="endCity">
			到达城市
		</view>
	</view>
	<uni-popup ref="popup" :mask-click="true" background-color="#fff" borderRadius="20px 20px 0 0">
		<view class="popupbg">
			<view class="popupbg-title">
				<span></span>
				<span>选择城市</span>
				<span @click="popup.close()">关闭</span>
			</view>
			<view class="popupbg-search">

			</view>
			<view class="popupbg-main">
				<view class="province">
					<view class="addItem" v-for="i in provinceList" :key="i.name" @click="provinceClick(i)">
						<span :class="i.name===curProvince?'curColor':''">{{i.name}}</span>
					</view>
				</view>
				<view class="city">
					<view class="addItem" v-for="i in cityList" :key="i.name" @click="cityClick(i)">
						<span :class="i.name===curCity?'curColor':''">{{i.name}}</span>
					</view>
				</view>
				<view class="county">
					<view class="addItem" v-for="i in countyList" :key="i.name" @click="countyClick(i)">
						<span :class="i.name===curCounty?'curColor':''">{{i.name}}</span>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import commonData from "../utils/commonData.js"
	const popup = ref();
	const provinceList = ref([]);
	const curProvince = ref('北京市');
	const cityList = ref([]);
	const curCity = ref('');
	const countyList = ref([]);
	const curCounty = ref('');

	const app = getApp().globalData.utils
	onLoad(async () => {
		console.log(commonData.address)
		provinceList.value = commonData.address
		initAdd(curProvince.value)
	})
	const startCity = () => {
		console.log('始发城市')
		popup.value.open('bottom')
	}
	const endCity = () => {
		console.log('到达城市')
		popup.value.open('bottom')
	}
	/* 选择省 */
	const provinceClick = (item) => {
		if (item.name==curProvince.value) return
		curProvince.value = item.name
		initAdd(curProvince.value)
	}
	/* 选择市 */
	const cityClick = (item) => {
		if (item.name==curCity.value ) return
		curCity.value = item.name
		countyList.value = item.list
		curCounty.value = countyList.value[0].name
	}
	/* 选择县 */
	const countyClick = (item) => {
		if (item.name==curCounty.value ) return
		curCounty.value = item.name
	}
	/* 初始化地址列表 */
	const initAdd = (val) => {
		let addObj = provinceList.value.find(i => i.name === val)
		console.log('1', addObj)
		cityList.value = addObj.list
		curCity.value = cityList.value[0].name
		countyList.value = cityList.value[0].list
		curCounty.value = countyList.value[0].name
	}
	/* 滚动条定位 */
	
</script>

<style lang="scss" scoped>
	.curColor {
		color: #be4f47;
	}

	.add {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>view {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
		}
	}

	.popupbg {
		height: 85vh;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 24rpx;

		&-title {
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			:nth-child(2) {
				font-size: 32rpx;
				color: #000;
			}

			:last-child {
				color: #999;
			}
		}

		&-search {
			width: 100%;
			height: 80rpx;
			margin-top: 10rpx;
			border-radius: 15rpx;
			border: 1px solid #999;
		}

		&-main {
			margin-top: 20rpx;
			display: flex;

			>view {
				flex: 1;
				box-sizing: border-box;
				padding-left: 10rpx;
				border-left: 1px solid #999;
				height: calc(85vh - 200rpx);
				overflow-y: auto;

				.addItem {
					padding: 16rpx 0;
					font-size: 28rpx;
				}
			}

			.province {
				border-left: none;
			}
		}
	}
</style>